<!DOCTYPE html>
<html>
<head>
    <title>Animation</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../test.js"></script>
    <style>
        body {
            font-family: Arial;
        }

        @keyframes rotate0 {
            0% {
                transform: rotate(0deg);
            }
        }

        @keyframes rotate45 {
            0% {
                transform: rotate(45deg);
            }
        }

        p {
            font: 22px/1 Arial, sans-serif;
            position: absolute;
            top: 25%;
            left: 25%;
            width: 50%;
            height: 50%;
            color: #fff;
            background-color: #666;
            line-height: 90px;
            text-align: center;
        }

        .transformed.working p {
            transform: rotate(45deg);
        }

        .animated.working p {
            animation-name: rotate0;
            animation-duration: 1ms, 1ms;
            animation-play-state: paused;
        }

        .animated.broken p {
            animation-name: rotate45;
            animation-duration: 1ms;
            animation-play-state: paused;
        }

        .transitioned p {
            transition: 1ms, 1ms;
            transform: rotate(45deg)
        }

        .transition-delay {
            transition: 1ms;
            transition-delay: 50ms;
            transform: rotate(45deg)
        }

        div {
            float: left;
            clear: left;
            margin-right: 10px;
            background-color: #ccc;
            width: 180px;
            height: 180px;
            position: relative;
        }
    </style>

</head>
<body>
<div class="transformed working">
    <p>Hello</p>
</div>

<div class="animated working">
    <p>Hello</p>
</div>

<div class="animated broken">
    <p>Hello</p>
</div>

<div class="transitioned broken">
    <p>Hello</p>
</div>

<div class="transition-delay">
    <p>Hello</p>
</div>
</body>
</html>
